<script lang="ts" setup>
import type { TabOption } from '@vben/types';
import { $t } from '@vben/locales';
import { AnalysisChartCard, AnalysisChartsTabs } from '@vben/common-ui';
import {
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDownloadIcon,
} from '@vben/icons';
import { openWindow } from '@vben/utils';

import { getDashboard } from '#/api/admin/dashboard';

import AnalysisOverview from './analysis-overview.vue';
import AnalyticsTrends from './analytics-trends.vue';
import AnalyticsVisits from './analytics-visits.vue';
import AnalyticsVisitsData from './analytics-visits-data.vue';
import AnalyticsVisitsSales from './analytics-visits-sales.vue';
import AnalyticsVisitsSource from './analytics-visits-source.vue';

const router = useRouter();
const overviewItems: any = shallowRef([
  {
    icon: SvgCardIcon,
    title: $t('admin.userCount'),
    totalTitle: $t('admin.totalUserCount'),
    totalValue: 120_000,
    value: 2000,
  },
  {
    icon: SvgCakeIcon,
    title: $t('admin.visitCount'),
    totalTitle: $t('admin.totalVisitCount'),
    totalValue: 500_000,
    value: 20_000,
  },
  {
    icon: SvgDownloadIcon,
    title: $t('admin.downloadCount'),
    totalTitle: $t('admin.totalDownloadCount'),
    totalValue: 120_000,
    value: 8000,
  },
  {
    icon: SvgBellIcon,
    title: $t('admin.usageCount'),
    totalTitle: $t('admin.totalUsageCount'),
    totalValue: 50_000,
    value: 5000,
  },
]);

const chartTabs: TabOption[] = [
  {
    label: $t('admin.trafficTrend'),
    value: 'trends',
  },
  {
    label: $t('admin.monthlyVisits'),
    value: 'visits',
  },
];


const handleGetDashboard = async () => {
  const {
    data: { list },
  } = await getDashboard();
  list.forEach((element: any) => {
    element.title = element.name;
    element.totalTitle = `${element.name}`;
    element.totalValue = element.value;
  });
  overviewItems.value = list;
};

function navTo(nav: any) {
  if (nav.router?.startsWith('http')) {
    openWindow(nav.router);
    return;
  }
  if (nav.router?.startsWith('/')) {
    router.push(nav.router).catch((error) => {
      console.error('Navigation failed:', error);
    });
  } else {
    console.warn(
      `Unknown URL for navigation item: ${nav.title} -> ${nav.router}`,
    );
  }
}
onMounted(() => {
  handleGetDashboard();
});
</script>

<template>
  <div class="p-5">
    <AnalysisOverview :items="overviewItems" @click="navTo" />
    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <AnalyticsTrends />
      </template>
      <template #visits>
        <AnalyticsVisits />
      </template>
    </AnalysisChartsTabs>

    <div class="mt-5 w-full md:flex">
    <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" :title="$t('admin.visitCount')">
      <AnalyticsVisitsData />
    </AnalysisChartCard>
    <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" :title="$t('admin.visitSource')">
      <AnalyticsVisitsSource />
    </AnalysisChartCard>
    <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" :title="$t('admin.visitTrend')">
      <AnalyticsVisitsSales />
    </AnalysisChartCard>
  </div>
  </div>
</template>
